<template>
	<view class="my-container mr-6 ml-6">
		<view class="d-flex mt-6">
			<image class="face"
				src="https://img2.baidu.com/it/u=3973855039,4170930478&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500">
			</image>
			<view class="ml-6 flex-space">
				<view class="d-flex justify-content-between flex-space">
					<view class="user-name">名称大西瓜</view>
					<uni-icons @click="handleJump('/pages/settings/index')" color="#9B9B9B" type="gear" size="25">
					</uni-icons>
				</view>
				<view class="mt-6 d-flex align-items-center">
					<image class="font-vip-icon" :src="require('@/static/images/font-vip-icon.png')">
					</image>
					<view class="user-phone">157****1234</view>
				</view>
			</view>
		</view>
		<view class="mt-12">
			<view class="my-menu-bg d-flex align-items-center justify-content-between">
				<view>
					<view class="d-flex align-items-center">
						<image class="vip-icon" :src="require('@/static/images/vip-icon.png')" mode="widthFix"></image>
						<view class="user-info-text">会员资料未完善</view>
					</view>
					<view class="vip-tips">根据平台规定，会员需每6个月缴费一次</view>
				</view>
				<button style="background-color: #7F8395;">完善资料</button>
			</view>
			<view class="d-flex w-100 pt-7 pb-8">
				<view @click="handleJump('/pages/my/card')">
					<view class="image my-menu-icon1">
					</view>
					<view class="menu-text">我的证书</view>
				</view>
				<view class="middle-image" @click="handleJump('/pages/my/bill')">
					<view class="image my-menu-icon2">
					</view>
					<view class="menu-text">我的账单</view>
				</view>
				<view>
					<view class="image my-menu-icon3" @click="handleJump('/pages/my/commission')">
					</view>
					<view class="menu-text">我的佣金</view>
				</view>
			</view>
		</view>
		<view class="link-box">
			<view class="d-flex justify-content-between align-items-center">
				<view class="left-text" @click="handleJump('/pages/my/cooperationUnit')">申请开通合作单位</view>
				<view class="d-flex align-items-center">
					<view class="right-text">未开通</view>
					<uni-icons type="right" color="#999999" size="12"></uni-icons>
				</view>
			</view>
			<view @click="handleJump('/pages/agreement/index?type=10')"
				class="d-flex justify-content-between align-items-center">
				<view class="left-text">申请开通合作个人</view>
				<view class="d-flex align-items-center">
					<view class="right-text">未开通</view>
					<uni-icons type="right" color="#999999" size="12"></uni-icons>
				</view>
			</view>
			<view @click="$refs.custompopup.open()" class="d-flex justify-content-between align-items-center">
				<view class="left-text">申请加入遗嘱库工作人员</view>
				<view class="d-flex align-items-center">
					<view class="right-text">未开通</view>
					<uni-icons type="right" color="#999999" size="12"></uni-icons>
				</view>
			</view>
		</view>
		<view class="link-box">
			<view @click="handleJump('/pages/index/contactUs')"
				class="d-flex justify-content-between align-items-center">
				<view class="left-text">联系我们</view>
				<uni-icons type="right" color="#999999" size="12"></uni-icons>
			</view>
		</view>
		<customPopup ref="custompopup" iconUrl="popup-icon" title="温馨提示" :content="content"
			subContent="客服电话: 400-668-0418" phone="400-668-0418" btnContent="拨打电话" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: [{
					id: 1,
					value: '平台暂时不支持自行注册'
				}, {
					id: 2,
					value: '请联系平台添加账号'
				}]
			};
		},
		methods: {
			handleJump(path) { //页面跳转
				uni.navigateTo({
					url: path
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: rgba(248, 248, 248, 1);
	}

	.my-container {
		line-height: 1;
		overflow: hidden;

		.face {
			width: 124rpx;
			height: 124rpx;
		}

		.font-vip-icon {
			width: 98rpx;
			height: 37rpx;
		}

		.user-name {
			font-size: 38rpx;
			font-weight: bold;
			color: #333333;
		}

		.user-phone {
			width: 206rpx;
			height: 48rpx;
			border: 1rpx solid #ECEBE9;
			border-radius: 24rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #666666;
			text-align: center;
			line-height: 48rpx;
			margin-left: 26rpx;
		}

		.my-menu-bg {
			width: 685rpx;
			height: 113rpx;
			background: url('@/static/images/my-muen-bg.png') no-repeat;
			background-size: 100% 100%;

			.vip-icon {
				width: 50rpx;
				height: 50rpx;
				margin-left: 30rpx;
			}

			.user-info-text {
				font-size: 30rpx;
				font-weight: 500;
				color: #FFFFFF;
				margin-left: 30rpx;
			}

			.vip-tips {
				font-size: 20rpx;
				font-weight: 500;
				color: #D4D9EC;
				margin-left: 30rpx;
				margin-top: 10rpx;
			}

			button {
				height: 56rpx;
				border-radius: 28rpx;
				line-height: 56rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #E6EBFF;
				margin: 0;
				margin-right: 30rpx;
				padding: 0 20rpx;
			}
		}

		.w-100 {
			background-color: #fff;
			border-bottom-left-radius: 15rpx;
			border-bottom-right-radius: 15rpx;

			.my-menu-icon1 {
				background: url('@/static/images/my-menu-icon1.png');
			}

			.my-menu-icon2 {
				background: url('@/static/images/my-menu-icon2.png');
			}

			.my-menu-icon3 {
				background: url('@/static/images/my-menu-icon3.png');
			}

			.image {
				width: 55rpx;
				height: 55rpx;
				margin: 0 auto;
				background-size: 100% 100%;
			}

			.middle-image {
				position: relative;

				&:after {
					position: absolute;
					top: 0;
					bottom: 0;
					content: "";
					right: 0;
					margin: auto 0;
					width: 1rpx;
					height: 32rpx;
					background-color: rgba(239, 239, 239, 1);
				}

				&:before {
					position: absolute;
					top: 0;
					bottom: 0;
					content: "";
					left: 0;
					margin: auto 0;
					width: 1rpx;
					height: 32rpx;
					background-color: rgba(239, 239, 239, 1);
				}
			}

			>view {
				width: 33.33%;
				text-align: center;


				.menu-text {
					font-size: 24rpx;
					font-weight: 500;
					color: #333333;
					margin-top: 15rpx;
				}
			}
		}

		.link-box {
			margin-top: 20rpx;
			background-color: #fff;
			border-radius: 15rpx;


			>view {
				height: 94rpx;
				margin: 0 38rpx;
				border-bottom: 1rpx dotted rgba(231, 231, 231, 1);

				&:last-child {
					border: 0;
				}
			}


			.left-text {
				font-size: 26rpx;
				font-weight: 500;
				color: #333333;
			}

			.right-text {
				font-size: 26rpx;
				font-weight: 500;
				color: #CCCCCC;
				margin-right: 22rpx;
			}
		}

	}
</style>
